<template>
    <div class="paper-container">
      <el-row class="filter">
        <el-col class="shadow" :span="22" :offset="1">
          <el-form ref="filterInfo" :model="filterInfo" size="mini">
            <el-row class="innerContent">
              <div class="innerItem1">
                <el-form-item label="论文标题" label-width="80px" :label-position="labelPosition">
                  <el-input
                    v-model="filterInfo.title"
                    size="mini"
                    placeholder="请输入论文标题"
                    show-word-limit
                    maxlength="15"></el-input>
                </el-form-item>
              </div>
              <div class="innerItem2">
                <el-form-item label="比赛名称" label-width="80px" :label-position="labelPosition">
                  <el-input
                    v-model="filterInfo.competitionName"
                    size="mini"
                    placeholder="请输入比赛名称"
                    show-word-limit
                    maxlength="15"></el-input>
                </el-form-item>
              </div>
            </el-row>
            <el-row class="innerContent">
              <div class="innerItem1">
                <el-form-item label="论文作者" label-width="80px" :label-position="labelPosition">
                  <el-input
                    v-model="filterInfo.author"
                    size="mini"
                    placeholder="请输入作者名"
                    show-word-limit
                    maxlength="15"></el-input>
                </el-form-item>
              </div>
              <div class="innerItem2">
                <el-form-item label="问题领域" label-width="80px" :label-position="labelPosition">
                  <el-input
                    v-model="filterInfo.domain"
                    size="mini"
                    placeholder="请输入问题领域"
                    show-word-limit
                    maxlength="15"></el-input>
                </el-form-item>
              </div>
            </el-row>
            <el-row class="innerContent">
              <div class="innerItem1">
                <el-form-item label="比赛年份" label-width="80px" :label-position="labelPosition">
                  <el-date-picker
                    v-model="selectYear"
                    type="year"
                    placeholder="选择年份">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="innerItem2">
                <el-form-item label="题号类型" label-width="80px" :label-position="labelPosition">
                  <el-select v-model="filterInfo.type" clearable placeholder="请选择">
                    <el-option
                      v-for="item in problemType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-row>
            <el-row class="innerContent">
              <div class="innerItem1">
                <el-form-item label="算法标签" label-width="80px" :label-position="labelPosition">
                  <el-tag
                    :key="tag"
                    v-for="tag in filterInfo.methodList"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="tagValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button v-else class="button-new-tag"  size="mini" @click="showInput">+ 新标签</el-button>
                </el-form-item>
              </div>
              <div class="innerItem2">
                <el-form-item>
                  <el-button type="primary" size="mini" @click="search" :loading="isSearching">搜索</el-button>
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row class="paperList">
        <el-col :span="22" :offset="1">
          <el-container class="shadow paperContent">
            <el-main>
              <el-table
                :data="result"
                height="100%"
                v-loading="tableLoading"
                style="width: 100%">
                <el-table-column
                  prop="title"
                  label="论文标题"
                  width="250">
                  <template slot-scope="scope">
                    <el-link @click="showPid(scope.row.pid)" type="primary">{{scope.row.title}}</el-link>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="competitionName"
                  label="比赛名称"
                  sortable
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="author"
                  label="作者"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="year"
                  label="比赛年份"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="上传时间"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="题号"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="domain"
                  label="问题领域"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="methodList"
                  label="方法标签"
                  width="200">
                  <template slot-scope="scope">
                    <el-tag size="mini" v-for="(item,i) in scope.row.methodList">{{item}}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer>
              <div class="page">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-size="pageSize"
                  layout="total, prev, pager, next, jumper"
                  :total="paperCount">
                </el-pagination>
              </div>
            </el-footer>
          </el-container>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {getPaperList} from "../../api/paper";
  export default {
    name: "List",
    data() {
      return {
        labelPosition: 'right',
        isSearching: false,
        tableLoading:false,
        selectYear: '',
        filterInfo: {
          title: '',
          competitionName: '',
          author: '',
          domain: '',
          type: '',
          year: '',
          date: '',
          methodList: [],
        },
        result: [],
        problemType: [{
          label: '题号a',
          value: 'a'
        }, {
          label: '题号b',
          value: 'b'
        }, {
          label: '题号c',
          value: 'c'
        }, {
          label: '题号d',
          value: 'd'
        }, {
          label: '题号e',
          value: 'e'
        }, {
          label: '题号f',
          value: 'f'
        }],
        inputVisible: false,
        tagValue: '',
        currentPage: 1,
        pageSize: 10,
        paperCount: 0,
      }
    },
    watch: {
      selectYear(val) {
        if (val) {
          this.filterInfo.year = val.getFullYear();
        }
        else {
          this.filterInfo.year = null;
        }
      }
    },
    mounted() {
      this.generatorResult();
    },
    methods:{
      handleClose(tag) {
        this.filterInfo.methodList.splice(this.filterInfo.methodList.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let tagValue = this.tagValue;
        if (tagValue) {
          this.filterInfo.methodList.push(tagValue);
        }
        this.inputVisible = false;
        this.tagValue = '';
        if (this.filterInfo.methodList.length > 3) {
          this.$message.warning("至多输入三个标签");
          this.handleClose(tagValue);
        }
      },
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      // },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.generatorResult();
      },
      search(){
        let self = this;
        this.isSearching = true;
        this.tableLoading = true;
        this.currentPage = 1;
        getPaperList(this.filterInfo, this.currentPage, this.pageSize)
          .then(res => {
            if(res.code == 200) {
              self.result = res.data.paperInfoList;
              self.paperCount = res.data.count;
            }
            else {
              self.$message.error(res.msg);
            }
            self.isSearching = false;
            self.tableLoading = false;
          })
          .catch(error => {
            self.$message.error(error);
            self.isSearching = false;
            self.tableLoading = false;
          });

      },
      generatorResult(){
        let self = this;
        this.tableLoading = true;
        getPaperList(this.filterInfo, this.currentPage, this.pageSize)
          .then(res => {
            if(res.code == 200) {
              console.log(res);
              self.result = res.data.paperInfoList;
              self.paperCount = res.data.count;
            }
            else {
              self.$message.error(res.msg);
            }
            self.tableLoading = false;
          })
          .catch(error => {
            self.$message.error(error);
            self.tableLoading = false;
          });
      },

      showPid(pid){
        this.$router.push(`/paper/detail/${pid}`)
        // alert(pid);
      }
    }
  }
</script>

<style scoped>
  .paper-container{
    background-color: #f4f4f5;
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .shadow{
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 15px 15px 5px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    /*box-shadow: 0 0 5px #cac6c6;*/
    margin-top: 2vh;
  }
  .filter{
    order: 1;
    /*height: 32vh;*/
    /*display: flex;*/
    flex-shrink: 1;
    /*flex-basis: 40vh;*/
    flex-direction: column;
  }
  .paperList{
    order: 2;
    display: flex;
    flex-shrink: 1;
    overflow: hidden;
    margin-bottom: 2vh;
    /*height: 60vh;*/
    /*overflow-y: auto;*/
  }
  .innerContent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .innerItem1{
    order: 1;
    width: 400px;
    margin-right: 10px;
  }
  .innerItem2{
    order: 2;
    width: 400px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    /*height: 32px;*/
    /*line-height: 30px;*/
    /*padding-top: 0;*/
    /*padding-bottom: 0;*/
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .page{
    float: right;
    /*position: absolute;*/
  }
  .paperContent{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    /*overflow-y: auto;*/
  }
  .paperInfo{
    order: 1;
    overflow-y: auto;
  }
  .paperFooter{
    order: 2;
  }
</style>
